<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>
<body>
    <div id="root">
        <h2>显示格式化后的时间</h2>
        <!--计算属性实现-->
        <h3>现在是{{tmtTime}} 计算属性</h3>
        <!--methods实现-->
        <h3>现在是{{getFmtTime()}} method</h3>
        <!--过滤器实现-->
        <h3>现在是{{time | timeFormater | mySlice1}} 过滤器</h3>
    </div>
</body>
<script type="text/javascript">
    //定义一个全局过滤器
    Vue.filter('mySlice1',function(value){
        return value.slice(0,4)
    })
    new Vue({
      el:'#root', 
      data: { 
        time: 1731944872791
      },
      methods: {
        getFmtTime(){
            return dayjs(this.time).format('YYYY-MM-DD HH:mm')   
        }
      },
      computed:{
        tmtTime(){
            return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
        }
      },
      //局部过滤器
      filters:{
        timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){ // 当传入的参数为空时,str使用默认的这个
            return dayjs(this.time).format(str)
        },
        mysplise(value){
            return value.slice(0,5)
        }
      }
    })
</script>
</html>